import { t } from 'i18next'
import { StyledViewWrap, DeleteIcon, StyledWrapBlock } from './style'
import shallow from 'zustand/shallow'
import { useTvWallStore } from '../store'
import { useData } from './hook'
import { boxPositionsEntity } from '@/api/manager/tvwall/interface'
import { AddStyleModal } from '../AddStyleModal'
import { FC } from 'react'

const View: FC = () => {
	const { update, my_used_style, correct_style, config, style_map, isAddStyleModalOpen } = useTvWallStore(
		(state) => ({
			update: state.update,
			my_used_style: state.my_used_style,
			correct_style: state.correct_style,
			config: state.config,
			style_map: state.style_map,
			isAddStyleModalOpen: state.isAddStyleModalOpen,
		}),
		shallow
	)
	const { handleDeleteTVWallStyle, handleAddCallBack, handleChangeStyle } = useData()
	/**计算小方块位置 */
	const returnNormalWrap = (positionItem: boxPositionsEntity) => {
		const { box_x, box_y, box_width, box_height } = positionItem
		let rate = config.currentviewW / config.containerW
		let _left = box_x * rate
		let _right = box_y * rate
		let _width = box_width * rate
		let _height = box_height * rate
		return <StyledWrapBlock left={_left} top={_right} width={_width} height={_height}></StyledWrapBlock>
	}
	return (
		<StyledViewWrap className="tvwall-style-wrap">
			<ul className="tvwall-style-list">
				{my_used_style &&
					my_used_style.map((item, myUsedIndex) => {
						const positions = style_map[item.id]?.positions
						if (!positions) {
							return <></>
						}
						return (
							<li
								className={`tvwall-style tvwall-style-btn ${
									correct_style === item.id ? 'selected' : ''
								}`}
								onClick={() => {
									handleChangeStyle(style_map[item.id].id)
								}}
								key={myUsedIndex}
							>
								<span className="currentview">
									{positions.map((positionItem, positionIndex) => {
										return <div key={positionIndex}>{returnNormalWrap(positionItem)}</div>
									})}
								</span>
								<span className="TVstyleText" title={item.name}>
									{item.name}
								</span>
								<span className="box-menu-wrap">
									<span
										onClick={(e) => {
											e.stopPropagation()
											handleDeleteTVWallStyle(item)
										}}
									>
										<DeleteIcon></DeleteIcon>
									</span>
								</span>
							</li>
						)
					})}
			</ul>
			<div
				className="tvwall-style add-tvwall-style"
				onClick={() => {
					update({ isAddStyleModalOpen: true })
				}}
			>
				<span className="tvwall-style-icon"></span>
				<span className="tvwall-style-text">{t('添加电视墙')}</span>
			</div>
			{isAddStyleModalOpen && <AddStyleModal callBack={handleAddCallBack}></AddStyleModal>}
		</StyledViewWrap>
	)
}
export default View
